import Vue from "vue"
import Vuex, {ActionTree, GetterTree, ModuleTree, MutationTree, Payload} from "vuex"
import getters from "./getters"
import actions from "./actions"
import mutations from "./mutations"
//第一步使用插件
Vue.use(Vuex)
/**
 * 进行代码的抽离
 *
 */
const state= {
  counter: 100,
  studens: [
    {id:1,name:"zhangsan",age:15},
    {id:2,name:"lisi",age:18},
    {id:3,name:"wangwu",age:17},
    {id:4,name:"zhaoliu",age:16}
  ]
}
/**
 * 模块里面同样有这些属性，但是一般模块里面不会在包含 modules，当然很复杂也是可以有的，最好不要
 * 和vuex 实例大概一样的用法，可以参考，不行就打印自己看看
 *
 * 目前发现 模块A的getters，mutations 都是加入到 vuex平级的这些属性下面去的，所以起名字不要冲突，要加上前缀
 *
 * @type {{mutations: {}, state: {}, getters: {}, actions: {}, modules: {}}}
 */
const moduleA={
  state: {
    name: '我是moduleA的name',
    counter: 10,
    list: [1,2,3,4,5]
  },
  getters: {
    filterList(state){
      return state.list.filter(e=>e>3)
    },
    filterList2(state){
      return (value)=>{
        return state.list.filter(e=>e>value)
      }
    }
  },
  actions: {
    /**
     *
     * @param content  模块A的上下文  里面有个rootState 其实就是上一级父类的 state属性 ，
     * 在这个定义就是vuex的实例，可以打印看看,已打印为准
     * @param value
     */
    aAsyncMethod1(content,value){
      console.log(content);
      setTimeout(()=>{
        content.state.counter+=value
      },1000)
    }
  },
  mutations: {
    counterHandler(state,value){
      state.counter+=value
    },
    inc(state,value){
      console.log("我是模块A里面的inc");
      state.counter+=value
    }
  },
  modules: {

  }
}
const moduleB={
  state: {
    name: '我是moduleB的name'
  },
  getters: {

  },
  actions: {

  },
  mutations: {

  },
  modules: {

  }
}
//第二步创建
const vuex=new Vuex.Store({
  //状态管理
  state,
  //这个和计算属性有点类似
  getters,
  //异步提交到这，然后在提交mutations
  actions,
  //同步提交的业务
  mutations,
  /**
   * 模块的管理，可能一个项目很大，
   * A模块 管理一部分数据
   * B 模块管理一部分数据
   */
  modules: {
    moduleA,moduleB
  }
})

export default vuex
